<template>
  <view>
    <!--200px == 100px-->
    <view style="width: 70%;margin: 200rpx auto;">
      <view class="mr-title">用 户 注 册</view>
      <view class="mr-20">
        <uni-easyinput type="username" prefixIcon="person" v-model="form.userName" placeholder="请输入账号"></uni-easyinput>
      </view>
      <view class="mr-20">
        <uni-easyinput type="password" prefixIcon="locked" v-model="form.passWord" placeholder="请输入密码"></uni-easyinput>
      </view>
      <view class="mr-20">
        <uni-easyinput type="password" prefixIcon="locked" v-model="form.confirmPassWord" placeholder="请确认密码"
          @blur="confirm">
        </uni-easyinput>
      </view>
      <view class="mr-20">
        <uni-easyinput type="email" prefixIcon="email" v-model="form.email" placeholder="邮箱"></uni-easyinput>
      </view>
      <view class="mr-20">
        <button class="mr-login" @click="register">立即注册</button>
      </view>
      <view class="mr-20">
        <button type="default" @click="toLogin">前往登录</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {}
      }
    },
    methods: {
      toLogin() {
        uni.navigateTo({
          url: '/pages/my/login/login'
        })
      },
      confirm() {
        if (this.form.passWord != this.form.confirmPassWord) {
          uni.showToast({
            icon: "none",
            title: "两次密码不一致"
          })
          return
        }
      },
      register() {
        if (this.form.userName == null || this.form.passWord == null || this.form.email == null) {
          uni.showToast({
            icon: "none",
            title: "请输入信息"
          })
          return
        }
        if (this.form.passWord.length <= 4) {
          uni.showToast({
            icon: "none",
            title: "密码长度要大于4"
          })
          return
        }
        //两次密码校验
        if (this.form.passWord != this.form.confirmPassWord) {
          uni.showToast({
            icon: "none",
            title: "两次密码不一致"
          })
          return
        }
        //邮箱正则表达式校验
        const emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
        if (emailReg.test(this.form.email)) {
          this.request({
            url: "/user/register",
            method: "POST",
            data: this.form
          }).then(res => {
            if (res.code === 200) {
              uni.showToast({
                icon: "success",
                title: "注册成功"
              })
            } else {
              uni.showToast({
                icon: "error",
                title: res.message
              })
            }
          })
        } else {
          uni.showToast({
            icon: "none",
            title: "邮箱格式不正确"
          })
        }
      }
    },
  }
</script>

<style>
  .mr-title {
    margin-top: 200rpx;
    font-size: 60rpx;
    color: #0094c8;
    margin-bottom: 60rpx;
    text-align: center;
  }

  .mr-20 {
    margin: 20rpx 0;
  }

  .mr-login {
    background-color: #3c9cff;
    color: white;
  }
</style>
